<template>
	<view id="withdraw-page">
		<view class="page-header">
			<view class="nav-header-tab active" style="width:100%">
				<view class="header-title">提现</view>
			</view>
		</view>
		<view class="page-content">
			<view class="withdraw-box">
				<view class="title">余额提现</view>
				<view class="input-box">
					<input class="input" type="text" v-model="money" @input="onInput" />
					<view class="all-withdraw" @click="allWithdraw">全部</view>
				</view>
				<view class="balance">
					<view class="balance-num">余额({{merchantMoneyText}}) ：{{balance}}</view>
					<view class="detail-btn" @click="toDetailPage">提现明细</view>
				</view>
				<view class="withdraw-box" >提现钱包：{{winthdrawType}}</view>
				<button class="confirm-btn" :loading="loading" :disabled="loading" @click="confirm">提现</button>
			</view>
			<view class="explanation-box">
				<view class="title">提现说明</view>
				<view class="content">1.提现金额最低{{lowest}},最高{{highest}}</view>
				<view class="content">2.当天提现额度{{dayMaxMoney}}，当天提现次数{{withdrewMaxNum}}次</view>
				<view class="content">3.申请提现后会马上到您的微信或支付宝钱包</view>
				<view class="content">4.提现打款至微信或支付宝钱包（需要已通过银行卡实名认证）</view>
				<view class="content">5.默认 {{aliPayMin}}-{{aliPayMax}} 提现到支付宝钱包</view>
				<view class="content">6.默认 {{wxPayMin}}-{{wxPayMax}} 提现到微信钱包</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	   apiCommissionCapitalCash,
	   apiAllPushWithdraw,
	   pushSubmitWithdrawAli
	} from '../../../http/apis.js'

	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return {
				loading: false,
				bankStatus: 1,
				// wxStatus:1,
				// zfbStatus:1,
				// curClick: 'wx',
				withdrewType: 1,
				bankMinMoney: 0,
				bankMaxMoney: 0,
				lowest: 3,
				highest: 0,
				dayMaxMoney: 0,
				withdrawDayMaxMoneyed: 0,
				withdrawNum: 0,
				withdrewMaxNum: 0,
				canMoney: 0,
				balance: '0.00', //余额
				money: '0.00', //提现金额,
				moneyType: 1,
				merchantMoneyText: uni.getStorageSync('merchantMoneyText'),
				aliPayMax: '0.00', //支付宝上限
				wxPayMax: '0.00', //微信上限
				aliPayMin: '0.00', //支付宝下限
				wxPayMin: '0.00', //微信下限
				winthdrawType: '', //提现方式，微信|支付宝
				defaultPayType: '1', //1支付宝，2微信
				pushId: '',
			}
		},
		onShow() {
			this.getInitData()
		},
		onLoad(options) {
			this.moneyType = options.type
		},
		methods:{
			onInput(e) {
				// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
				if (parseInt(e.detail.value) > 0) {
					if (parseInt(e.detail.value) >= parseInt(this.aliPayMin) && parseInt(e.detail.value) < parseInt(this.aliPayMax)) {
						this.winthdrawType = '支付宝'
						return
					}
					if(parseInt(e.detail.value) >= parseInt(this.wxPayMin) && parseInt(e.detail.value) < parseInt(this.wxPayMax)) {
						console.log('dfsafdasf')
						this.winthdrawType = '微信'
						return
					}
					if(this.defaultPayType == '1') {
						this.winthdrawType = '支付宝'
					}else{
						this.winthdrawType = '微信'
					}
				}else{
					this.winthdrawType = ''
				}
			},
			getInitData(){
				apiCommissionCapitalCash({
					token: this.token,
					type: this.moneyType
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.balance = res.data.msg.money;
						this.lowest = res.data.msg.min_money;
						this.highest = res.data.msg.max_money
						this.dayMaxMoney = parseInt(res.data.msg.day_max_money)
						this.withdrawDayMaxMoneyed = parseInt(res.data.msg.withdrew_max_moneyed)
						this.withdrawNum = parseInt(res.data.msg.withdrew_num)
						this.withdrewMaxNum = parseInt(res.data.msg.withdrew_max)
						this.bankMinMoney = res.data.msg.bank_min_money
						this.bankMaxMoney = res.data.msg.bank_max_money
						this.aliPayMin = res.data.msg.aliPaymin
						this.aliPayMax = res.data.msg.aliPaymax
						this.wxPayMin = res.data.msg.weChatPaymin
						this.wxPayMax = res.data.msg.weChatPayMax
						this.defaultPayType = res.data.msg.defaultType
						this.pushId = res.data.msg.pushId
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
				apiAllPushWithdraw({
					token: this.token,
					cashType: this.moneyType //2佣金  1本金
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.canMoney = res.data.can_money
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			allWithdraw(){
				if (this.canMoney == 0) {
					this.$msg.showToast('当前没有可以全部提现的佣金')
					return
				}
				this.money = parseFloat(this.canMoney).toFixed(2)
				// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
				if (parseInt(this.money) > 0) {
					if (parseInt(this.money) >= parseInt(this.aliPayMin) && parseInt(this.money) < parseInt(this.aliPayMax)) {
						this.winthdrawType = '支付宝'
						return
					}
					if(parseInt(this.money) >= parseInt(this.wxPayMin) && parseInt(this.money) < parseInt(this.wxPayMax)) {
						console.log('dfsafdasf')
						this.winthdrawType = '微信'
						return
					}
					if(this.defaultPayType == '1') {
						this.winthdrawType = '支付宝'
					}else{
						this.winthdrawType = '微信'
					}
				}else{
					this.winthdrawType = ''
				}
			},
			toDetailPage(){
				uni.navigateTo({
					url: './withdrawRecord'
				})
			},
			confirm(){
				if(this.balance == '0.00' || parseInt(this.balance) < 0){
					this.$msg.showToast('当前没有余额可以提现')
					return
				}

				if (parseFloat(this.money) < parseFloat(this.lowest)) {
						this.$msg.showToast('提现金额最低' + this.lowest)
						return
					}
					if (parseFloat(this.money) > parseFloat(this.highest)) {
						this.$msg.showToast('提现金额最高' + this.highest)
						return
					}
				if (this.withdrawDayMaxMoneyed > this.dayMaxMoney) {
					this.$msg.showToast('当天提现额度已用完')
					return
				}
				if (this.withdrawNum > this.withdrewMaxNum) {
					this.$msg.showToast('当天提现次数已用完')
					return
				}
				uni.showLoading({
					title: '提交中'
				});
				this.loading = true
				pushSubmitWithdrawAli({
					token: this.token,
					cashType: this.moneyType, //金额类型  1:本金  2：佣金  3：推荐金
					type: this.withdrewType, //提现类型 1：微信  2：银行卡
					canMoney: this.canMoney,
					money: parseFloat(this.money).toFixed(2)
				}).then(res =>{
					uni.hideLoading()
					this.loading = false
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						setTimeout(()=>{
							uni.navigateTo({
								url:'./withdrawRecord'
							})
						},300)
					} else {
						if (res.data.msg == '用户未绑定支付宝账号') {
							uni.navigateTo({
							    url: '/pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId
							});
						}else{
							this.$msg.showToast(res.data.msg)
						}
					}
				}).catch(res => {
					uni.hideLoading()
					this.loading = false
					this.$msg.showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
	}
	#withdraw-page{
		.page-header {
			text-align: center;
			font-size: $font-base;
			border-bottom: $border-bottom-sm;
			padding-top: 10upx;
			background: #FFFFFF;
			.nav-header-tab {
				display: inline-block;
				width: 50%;
				text-align: center;
				border-bottom: 2px solid transparent;
				padding: 5px 0;
				&.active {
					border-bottom: 2px solid $theme-color;
					.header-title {
						color:$theme-color;
						padding: 20upx 0;
					}
				}
			}
			.header-title {

			}
			.header-tips {
				color: $font-color-disabled;
				margin-top: 10upx;
			}
		}
		.page-content {
			.withdraw-box {
				background: #FFFFFF;
				border-radius: 24upx;
				padding: 32upx;
				margin: 32upx;
				.title {
					font-size: 28upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40upx;
				}
				.input-box {
					border-bottom: 1px solid #e0e0e0;
					margin-top: 20upx;
					display: flex;
					align-items: center;
					padding-bottom: 30upx;
					.symbol {
						font-size: 46upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 56upx;
					}
					.input {
						width: 80%;
						padding: 5px;
						vertical-align: bottom;
						flex: 1;
						font-size: 36upx;
					}
					.all-withdraw {
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: $theme-color;
						line-height: 24upx;
					}
				}
				.balance {
					display: flex;
					justify-content:space-between;

					margin-top: 32upx;
					.balance-num {
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #666666;
						line-height: 28upx;
					}
					.detail-btn {
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: $theme-color;
						line-height: 28upx;
					}
				}
				.confirm-btn {
					height: 80upx;
					line-height: 80upx;
					border-radius: 100upx;
					font-size: $font-lg;
					color: #fff;
					background: $theme-background-color;
					border-radius: 10upx;
					box-shadow: 1px 2px 5px $theme-color;
					margin: 60upx 32upx 30upx 32upx;
				}
			}
			.explanation-box {
				margin-top: 100upx;
				background: #FFFFFF;
				padding: 32upx;
				margin: 32upx;
				border-radius: 24upx;
				.title {
					font-size: 28upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28upx;
					margin-bottom: 28upx;
				}
				.content {
					font-size: 28upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 400;
					color: #999999;
					line-height: 44upx;
				}
			}
		}
	}
</style>
